<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>XRay - Responsive Bootstrap 4 Admin Dashboard Template</title>
      <!-- Favicon -->
      <link rel="shortcut icon"  th:href="@{/xray/images/favicon.ico}"/>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/bootstrap.min.css}">
      <!-- Typography CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/typography.css}">
      <!-- Style CSS -->
      <link rel="stylesheet" th:href="@{/xray/css/style.css}">
      <!-- Responsive CSS -->
      <link rel="stylesheet"  th:href="@{/xray/css/responsive.css}">

      <style>
         .my-mouse-img {
            position: absolute;
            z-index: 999;
         }
      </style>
   </head>
   <body>

   <img class="my-mouse-img" src="imgs/mouse-logo.jpg" alt="" width="60px">
   <script>
      document.addEventListener('mousemove', function (e) {
         //鼠标只要移动,就会触发事件
         var x = e.pageX;
         var y = e.pageY;
         var pic = document.querySelector('img');
         pic.style.left = x-20+'px';
         pic.style.top = y-40+'px';
      })
   </script>

   <!-- loader Start -->
      <div id="loading">
         <div id="loading-center">
         </div>
      </div>
      <!-- loader END -->
      <!-- Wrapper Start -->
      <div class="wrapper">
         <!-- Sidebar  -->
         <div class="iq-sidebar">
            <div class="iq-sidebar-logo d-flex justify-content-between">
               <a href="/agency-chart">
                  <img src="xray/images/logo.png" class="img-fluid" alt="">
                  <span>XRay</span>
               </a>
               <div class="iq-menu-bt-sidebar">
                  <div class="iq-menu-bt align-self-center">
                     <div class="wrapper-menu">
                        <div class="main-circle"><i class="ri-more-fill"></i></div>
                        <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                     </div>
                  </div>
               </div>
            </div>
            <div id="sidebar-scrollbar">
               <nav class="iq-sidebar-menu">
                  <ul class="iq-menu">
                     <li>
                        <a href="/agency-chart" class="iq-waves-effect"><i class="ri-hospital-fill"></i><span>首页图表</span></a>
                     </li>
                     <li>
                        <a href="/map" class="iq-waves-effect"><i class="ri-hospital-fill"></i><span>搜索定位</span></a>
                     </li>
                     <li>
                        <a href="/agency-table" class="iq-waves-effect"><i class="ri-home-8-fill"></i><span>查看所有机构</span></a>
                     </li>
                     <li>
                        <a href="/report" class="iq-waves-effect"><i class="ri-briefcase-4-fill"></i><span>民意调查</span></a>
                     </li>
                     <li>
                        <a href="/personcenter" class="iq-waves-effect"><i class="ri-group-fill"></i><span>个人中心</span></a>
                     </li>
                  </ul>
               </nav>
               <div class="p-3"></div>
            </div>
         </div>
         <!-- Page Content  -->
         <div id="content-page" class="content-page">
            <!-- TOP Nav Bar -->
            <div class="iq-top-navbar">
               <div class="iq-navbar-custom">
                  <div class="iq-sidebar-logo">
                     <div class="top-logo">
                        <a href="/agency-chart" class="logo">
                           <img src="xray/images/logo.png" class="img-fluid" alt="">
                           <span>XRay</span>
                        </a>
                     </div>
                  </div>
                  <nav class="navbar navbar-expand-lg navbar-light p-0">
                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <i class="ri-menu-3-line"></i>
                     </button>
                     <div class="iq-menu-bt align-self-center">
                        <div class="wrapper-menu">
                           <div class="main-circle"><i class="ri-more-fill"></i></div>
                           <div class="hover-circle"><i class="ri-more-2-fill"></i></div>
                        </div>
                     </div>
                     <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ml-auto navbar-list">
                           <li class="nav-item">
                              <a class="search-toggle iq-waves-effect language-title" href="#"><img src="xray/images/small/flag-01.png" alt="img-flaf" class="img-fluid mr-1" style="height: 16px; width: 16px;" /> English <i class="ri-arrow-down-s-line"></i></a>
                              <div class="iq-sub-dropdown">
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-02.png" alt="img-flaf" class="img-fluid mr-2" />French</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-03.png" alt="img-flaf" class="img-fluid mr-2" />Spanish</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-04.png" alt="img-flaf" class="img-fluid mr-2" />Italian</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-05.png" alt="img-flaf" class="img-fluid mr-2" />German</a>
                                 <a class="iq-sub-card" href="#"><img src="xray/images/small/flag-06.png" alt="img-flaf" class="img-fluid mr-2" />Japanese</a>
                              </div>
                           </li>
                           <li class="nav-item iq-full-screen">
                              <a href="#" class="iq-waves-effect" id="btnFullscreen"><i class="ri-fullscreen-line"></i></a>
                           </li>
                           <li class="nav-item">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-notification-3-fill"></i>
                                 <span class="bg-danger dots"></span>
                              </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Notifications<small class="badge  badge-light float-right pt-1">4</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Emma Watson Bini</h6>
                                                <small class="float-right font-size-12">Just Now</small>
                                                <p class="mb-0">95 MB</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New customer is join</h6>
                                                <small class="float-right font-size-12">5 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Two customer is left</h6>
                                                <small class="float-right font-size-12">2 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">New Mail from Fenny</h6>
                                                <small class="float-right font-size-12">3 days ago</small>
                                                <p class="mb-0">Jond Bini</p>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                           <li class="nav-item dropdown">
                              <a href="#" class="search-toggle iq-waves-effect">
                                 <i class="ri-mail-open-fill"></i>
                                 <span class="bg-primary count-mail"></span>
                              </a>
                              <div class="iq-sub-dropdown">
                                 <div class="iq-card shadow-none m-0">
                                    <div class="iq-card-body p-0 ">
                                       <div class="bg-primary p-3">
                                          <h5 class="mb-0 text-white">All Messages<small class="badge  badge-light float-right pt-1">5</small></h5>
                                       </div>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/01.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Bini Emma Watson</h6>
                                                <small class="float-left font-size-12">13 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/02.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum Watson</h6>
                                                <small class="float-left font-size-12">20 Apr</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/03.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Why do we use it?</h6>
                                                <small class="float-left font-size-12">30 Jun</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/04.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Variations Passages</h6>
                                                <small class="float-left font-size-12">12 Sep</small>
                                             </div>
                                          </div>
                                       </a>
                                       <a href="#" class="iq-sub-card" >
                                          <div class="media align-items-center">
                                             <div class="">
                                                <img class="avatar-40 rounded" src="xray/images/user/05.jpg" alt="">
                                             </div>
                                             <div class="media-body ml-3">
                                                <h6 class="mb-0 ">Lorem Ipsum generators</h6>
                                                <small class="float-left font-size-12">5 Dec</small>
                                             </div>
                                          </div>
                                       </a>
                                    </div>
                                 </div>
                              </div>
                           </li>
                        </ul>
                     </div>
                     <ul class="navbar-list">
                        <li>
                           <a href="#" class="search-toggle iq-waves-effect d-flex align-items-center">
                              <img src="xray/images/user/1.jpg" class="img-fluid rounded mr-3" alt="user">
                              <div class="caption">
                                 <h6 class="mb-0 line-height" th:text="${myname}"></h6>
                              </div>
                           </a>
                           <div class="iq-sub-dropdown iq-user-dropdown">
                              <div class="iq-card shadow-none m-0">
                                 <div class="iq-card-body p-0 ">
                                    <div class="d-inline-block w-100 text-center p-3">
                                       <a class="bg-primary iq-sign-btn" href="/signin" role="button">Sign out<i class="ri-login-box-line ml-2"></i></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </nav>
               </div>
            </div>
            <!-- TOP Nav Bar END -->



            <div class="container-fluid">
               <div class="row">
                  <div class="col-lg-4">
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Agency Information</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div class="about-info m-0 p-0">
                              <div class="row">
                                 <div class="col-4">Name:</div>
                                 <div class="col-8" >[[${agency.agencyName}]]</div>
                                 <div class="col-4">Type:</div>
                                 <div class="col-8" >
                                    <span th:if="${agency.agencyType} eq small ">幼儿园</span>
                                    <span th:if="${agency.agencyType} eq middle">中小学</span>
                                    <span th:if="${agency.agencyType} eq college">大学</span>
                                    <span th:if="${agency.agencyType}  eq other ">校外培训机构</span>
                                 </div>
                                 <div class="col-4">Address:</div>
                                 <div class="col-8">[[${agency.agencyAddress}]]</div>
                                 <div class="col-4">Phone:</div>
                                 <div class="col-8">[[${agency.agencyPhone}]]</div>
                                 <div class="col-4">Income:</div>
                                 <div class="col-8">[[${agency.agencyIncome}]]</div>
                                 <div class="col-4">Built-up Time:</div>
                                 <div class="col-8">[[${agency.agencyTime}]]</div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <div class="iq-card">
                        <div class="iq-card-header d-flex justify-content-between">
                           <div class="iq-header-title">
                              <h4 class="card-title">Photo</h4>
                           </div>
                        </div>
                        <div class="iq-card-body">
                           <div class="about-info m-0 p-0">
                              <img th:src="${agency.agencyImg}" class="img-fluid" alt="">
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="col-lg-8">
                     <div class="row">

                        <div class="col-md-12">
                           <div class="iq-card">
                              <div class="iq-card-header d-flex justify-content-between">
                                 <div class="iq-header-title">
                                    <h4 class="card-title">Comments</h4>
                                 </div>
                              </div>
                              <div class="iq-card-body">
                                 <div class="iq-search-bar">

                                    <div class="iq-card-body">
                                       <ul class="list-inline m-0 p-0" th:each="comment,stat:${comments}">
                                          <li class="d-flex align-items-center justify-content-between mb-3">
                                             <div>
                                                <h6>[[${comment.commentContent}]]</h6>
                                                <p class="mb-0">[[${comment.commentTime}]] </p>
                                             </div>
                                          </li>
                                       </ul>
                                    </div>

                                    <form id="search-form" action="/agency-comment" class="searchbox">
                                       <input type="hidden" name="agencyID" th:value="${agency.agencyID}"/>
                                       <input type="text" name="commentContent" class="text search-input" placeholder="Type here to comment...">
                                       <input id="btn-search2" type="image" value="Submit" src="imgs/comment-submit.jpg"
                                              style="width: 28px;height: 28px; position: absolute;float: right;margin-top: 3px;margin-left: 5px"/>
                                      <!--<a class="search-link" ><i class="fa fa-paper-plane" aria-hidden="true"></i></a>-->
                                    </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>





            <footer class="bg-white iq-footer">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-lg-6">
                        <ul class="list-inline mb-0">
                           <li class="list-inline-item"><a href="privacy-policy.html">Privacy Policy</a></li>
                           <li class="list-inline-item"><a href="terms-of-service.html">Terms of Use</a></li>
                        </ul>
                     </div>
                     <div class="col-lg-6 text-right">
                        Copyright 2020  All Rights Reserved.
                     </div>
                  </div>
               </div>
            </footer>
            <!-- Footer END -->
         </div>
      </div>
      <!-- Wrapper END -->
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="xray/js/jquery.min.js"></script>
      <script src="xray/js/popper.min.js"></script>
      <script src="xray/js/bootstrap.min.js"></script>
      <!-- Appear JavaScript -->
      <script src="xray/js/jquery.appear.js"></script>
      <!-- Countdown JavaScript -->
      <script src="xray/js/countdown.min.js"></script>
      <!-- Counterup JavaScript -->
      <script src="xray/js/waypoints.min.js"></script>
      <script src="xray/js/jquery.counterup.min.js"></script>
      <!-- Wow JavaScript -->
      <script src="xray/js/wow.min.js"></script>
      <!-- Apexcharts JavaScript -->
      <script src="xray/js/apexcharts.js"></script>
      <!-- Slick JavaScript -->
      <script src="xray/js/slick.min.js"></script>
      <!-- Select2 JavaScript -->
      <script src="xray/js/select2.min.js"></script>
      <!-- Owl Carousel JavaScript -->
      <script src="xray/js/owl.carousel.min.js"></script>
      <!-- Magnific Popup JavaScript -->
      <script src="xray/js/jquery.magnific-popup.min.js"></script>
      <!-- Smooth Scrollbar JavaScript -->
      <script src="xray/js/smooth-scrollbar.js"></script>
      <!-- lottie JavaScript -->
      <script src="xray/js/lottie.js"></script>
      <!-- Chart Custom JavaScript -->
      <script src="xray/js/chart-custom.js"></script>
      <!-- Custom JavaScript -->
      <script src="xray/js/custom.js"></script>
   </body>
</html>